<script>
  $(function () {
    $("#jump_date").change(function(){
      window.location = "<?=site_url("monitoring/")?>/index/"+$("#jump_date").val();
    });
  });
</script>
<script src="<?=$url?>js/chart/jqplot.barRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.pointLabels.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.categoryAxisRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.logAxisRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.canvasTextRenderer.min.js"></script>
<script src="<?=$url?>js/chart/jqplot.canvasAxisTickRenderer.min.js"></script>
<div id="main-content">
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span12">
        <div class="widget-block">
          <div class="alert alert-success fade in">
            Monitor for date <?=$this->form_eksternal->form_date("jump_date", $valtampil, "jump_date")?>
          </div>
          <?php
          if($message == 'filed'){
          ?>
          <div class="alert alert-error fade in">
            <button data-dismiss="alert" class="close" type="button">×</button>
            <strong>Filed!</strong> Fail to save data.
          </div>
          <?php
          }
          if($message == 'sukses'){
          ?>
          <div class="alert alert-success fade in">
            <button data-dismiss="alert" class="close" type="button">×</button>
            <strong>Success!</strong> Kategori juklak baru berhasil dibuat.
          </div>
          <?php
          }
          ?>
          <div class="widget-head">
            <h5><?php print $title_table?></h5>
            <div class="widget-control pull-right">
              <a href="#" data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-cog"></i><b class="caret"></b></a>
              <ul class="dropdown-menu">
<!--                <li><a href="<?php print site_url("juklak/kategori/add-new") ?>"><i class="icon-plus"></i> Add New</a></li>
                <li><a href="#"><i class="icon-ok"></i> Active</a></li>
                <li><a href="#"><i class="icon-minus-sign"></i> No-Active</a></li>
                <li><a href="#"><i class="black-icons pdf_document"></i> Export to PDF</a></li>-->
                <li><a href="<?php print site_url("monitoring/export-xls/{$year}-{$monthd}-{$dated}") ?>"><i class="black-icons excel_document"></i> Export to XLS</a></li>
              </ul>
            </div>
          </div>
          <div class="widget-content">
            <div class="widget-box">
              <table class="data-tbl-boxy4 table">
                <thead>
                  <tr>
                    <th>Tanggal <br />Terakhir Input</th>
                    <th>Outlet</th>
                    <th>Unit Transaksi</th>
                    <th>Unit Entry</th>
                    <th>Omset</th>
                    <th>UE Proyeksi</th>
                    <th>Omset Proyeksi</th>
                    <th>BC</th>
                  </tr>
                </thead>
                <tbody>
                  <?php
                  if(is_array($data)){
                    foreach ($data as $key => $value) {
                      if($value->tanggal_max){
                        $tanggal = $value->tanggal_max." ".$month." ".$year;
                        $max_tanggal = $value->tanggal_max;
                      }
                      else{
                        $tanggal = "";
                        $max_tanggal = 1;
                      }
					  
					  if($this->session->userdata('id') == "1"){
                        $data_name_pos = "|| ".$value->pos;
                      }else{
                        $data_name_pos = "";
                      }
                      $viewunit_entry = number_format($value->unit_entry, 0, ",", ".");
                      $viewue_entry = number_format($value->ue_omset, 0, ",", ".");
                      $viewunit_transaksi = number_format($value->total_transaksi, 0, ",", ".");
                      $viewomset = number_format($value->total_omset, 0, ",", ".");
                      $omset_proyeksi = $value->total_omset/$dated * $tdayd;
                      $viewomset_proyeksi = number_format($omset_proyeksi, 0, ",", ".");
                      $bc = $this->global_models->get_user_outlet($value->id_outlet, "Operasional - BC");
//                      $bc = $this->global_models->get_user_outlet($value->id_outlet, "Operation - BC");
                      $link_bc = site_url("outlet/milik/".$bc[0]->id_users);
                      if($hide == "none")
                        $link_bc = "#";
                      $link_outlet = site_url("monitoring/laporan-tahunan/".$value->id_outlet);
                      print <<<EOD
                  <tr>
                    <td>{$tanggal}</td>
                    <td><a href="{$link_outlet}">{$value->name} {$data_name_pos}</a></td>
                    <td>{$viewunit_transaksi}</td>
                    <td>{$viewunit_entry}</td>
                    <td>{$viewomset}</td>
                    <td>{$viewue_entry}</td>
                    <td>{$viewomset_proyeksi}</td>
                    <td><a href="{$link_bc}">{$bc[0]->name}</a></td>
                  </tr>
EOD;
                      $ticks .= "'{$value->name}',";
                      $s1 .= "{$value->total_transaksi},";
                      $s2 .= "{$value->unit_entry},";
                      $s3 .= "{$value->ue_omset},";
                      $t_s1 += $value->total_transaksi;
                      
                      $total_omset_new[] = $value->total_omset;
                      $total_omset_new2[] = $value->total_omset;
                      $nama_omset_new[] = $value->name;
                      $actifity_report_new[] = $value->id_actifity_report;
                    }
                  }
                  $avg_s1 = $t_s1/count($data);
                  $rep_s3 = str_repeat($avg_s1.",", count($data));
                  ?>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row-fluid" style="display: <?=$hide?>">
			<div style="width: 130%">
				<div class="graph-wrap">
          <div class="chart-block">
            <div id="chart5" style="height: 500px;">
            </div>
          </div>
        </div>
			</div>
		</div>
    <div class="row-fluid" style="display: <?=$hide?>">
			<div style="width: 130%">
				<div class="graph-wrap">
          <div class="chart-block">
            <div id="chart6" style="height: 500px">
            </div>
          </div>
        </div>
			</div>
		</div>
    <div class="row-fluid" style="display: <?=$hide?>">
			<div style="width: 100%">
				<div class="graph-wrap">
          <div class="chart-block">
            <div id="chart10" style="height: 500px">
            </div>
          </div>
        </div>
			</div>
		</div>
  </div>
</div>

<script>
  $(function(){
    var s1 = [<?=$s1?>];
    var s2 = [<?=$s2?>];
    var s3 = [<?=$s3?>];
    var s4 = [<?=$rep_s3?>];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = [<?=$ticks?>];
    var plot1 = $.jqplot('chart5', [s1, s2, s3, s4], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            shadow:false,
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 1 , tooltipLocation : 'ne'
        },
        title: 'Unit',
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Unit Transaksi',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Unit Entry',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'UE Proyeksi',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Rata-rata Unit Enry', markerOptions: {show:false}},
        ],
         seriesColors:['#00F', '#F00', '#0C6', '#F60'],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
        grid: {
            background: '#fff',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#ccc',
            gridLineWidth: 1
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    labelPosition: 'middle',
                    fontSize: '8pt',
                    angle: -90
                }
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '%d'}
            }
        }
    });
    <?php
    array_multisort($total_omset_new, SORT_DESC, $nama_omset_new, SORT_DESC);
    array_multisort($total_omset_new2, SORT_DESC, $actifity_report_new, SORT_DESC);
    foreach($total_omset_new as $ky => $vl){
      
      $data_target[$ky] = $this->global_models->get("d_day_actifity_report", 
              array("id_actifity_report" => $actifity_report_new[$ky], 
                    "tanggal" =>  0
                  ));
      
      $sr1 .= ($vl/1000000).",";
      $sr2 .= ($vl/$dated * $tdayd/1000000).",";
      $sr4 .= ((($data_target[$ky][0]->service * $data_target[$ky][0]->rata_service) 
              + ($data_target[$ky][0]->service_belanja * $data_target[$ky][0]->rata_service)
              + ($data_target[$ky][0]->service_belanja * $data_target[$ky][0]->rata_belanja)
              + ($data_target[$ky][0]->belanja * $data_target[$ky][0]->rata_belanja))/1000000).",";
      $ticksr .= "'{$nama_omset_new[$ky]}',";
      $t_sr1 += $vl/1000000;
    }
    $avg_sr1 = $t_sr1/count($data);
    $rep_sr3 = str_repeat($avg_sr1.",", count($data));
    ?>
    var sr1 = [<?=$sr1?>];
    var sr2 = [<?=$sr2?>];
    var sr3 = [<?=$rep_sr3?>];
    var sr4 = [<?=$sr4?>];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticksr = [<?=$ticksr?>];
    var plot2 = $.jqplot('chart6', [sr1, sr2, sr4, sr3], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            shadow:false,
        },
//        cursor: {
//            show: true,
//            zoom: false,
//            looseZoom: true,
//            showTooltip: false
//        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 1 , tooltipLocation : 'ne'
        },
        title: 'Rupiah (dalam juta rupiah)',
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Omset',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Omset Proyeksi',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Target Omset',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Rata-rata Omset', markerOptions: {show:false}},
        ],
         seriesColors:['#00F', '#F00', '#0C6', '#8cb059'],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
	grid: {
            background: '#fff',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#ccc',
            gridLineWidth: 1
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticksr,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                     labelPosition: 'middle',
                     fontSize: '8pt',
                    angle: -90
                }
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '%d'}
            }
        }
    });
    
    var ticksr = ['1','2','3','4','5','6','7','8','9','10'];
//    console.log(sr1);
//    console.log(sr2);
//    console.log(sr3);
//    console.log(sr4);
//    console.log(ticksr);
<?php
  
//  $this->debug($costume_query, true);
  $sr1 = "";
  $sr2 = "";
  foreach($costume_query AS $kk => $cq){
      $sr1 .= <<<EOD
        {$cq->service},
EOD;
      $sr2 .= <<<EOD
        {$cq->service_belanja},
EOD;
        $no++;
    }
  ?>
      var sr1 = [<?=$sr1?>];
    var sr2 = [<?=$sr2?>];
console.log(sr1);
    var plot10 = $.jqplot('chart10', [sr1, sr2], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            shadow:false,
        },
//        cursor: {
//            show: true,
//            zoom: false,
//            looseZoom: true,
//            showTooltip: false
//        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 1 , tooltipLocation : 'ne'
        },
        title: 'Rupiah (dalam juta rupiah)',
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[
            {label:'Service',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Service Belanja',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Target Omset',
            renderer:$.jqplot.BarRenderer,
            shadow:false,
            rendererOptions: {fillToZero: true, barMargin: 1, barPadding: 3}},
            {label:'Rata-rata Omset', markerOptions: {show:false}},
        ],
         seriesColors:['#00F', '#F00', '#0C6', '#8cb059'],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        legend: {
            show: true,
            placement: 'outsideGrid'
        },
	grid: {
            background: '#fff',
            drawBorder: false,
            shadow: false,
            gridLineColor: '#ccc',
            gridLineWidth: 1
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticksr,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                     labelPosition: 'middle',
                     fontSize: '8pt',
                    angle: -90
                }
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '%d'}
            }
        }
    });
});
</script>